<template>
	<view class="">
		<fa-navbar title="入会申请"></fa-navbar>
		<view class="status">
			<image src="../../static/images/auditing1.jpg" mode="" v-if="status ==1 "></image>
			<image src="../../static/images/auditing2.jpg" mode="" v-if="status ==2 "></image>
			<image src="../../static/images/auditing3.jpg" mode="" v-if="status ==3 "></image>
			<view class="text">
				<view class="icon">
					<u-icon name="checkbox-mark" size="50" v-if="status == 1"></u-icon>
					<u-icon name="close" size="50" v-if="status == 2"></u-icon>
					<u-icon name="hourglass-half-fill" size="50" v-if="status == 3"></u-icon>
					<view class="font" v-if="status == 1">
						审核通过
					</view>
					<view class="font" v-if="status == 2">
						不通过
					</view>
					<view class="font" v-if="status == 3">
						待审核
					</view>
				</view>
				<view class="num" v-if="status == 1">
					编号：{{detail.code}}
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(v,i) in displayedList" :key="i">
				<view class="left">
					{{v.title}}
				</view>
				<view class="right">
					{{v.value}}
					<view class="preview" v-if="v.status == 'image'" @click="previewImage">
						查看
					</view>
				</view>
			</view>
			<!-- 收起展开按钮 -->
			<view class="foldAndUnfold" @click="toggleFold">
				{{ foldText }}
			</view>
		</view>
		<view class="line">

		</view>
		<!-- 审核结果 -->
		<view class="result">
			<view class="top" v-if="status == 1">
				<view class="left">
					审核结果：
				</view>
				<view class="right">
					审核通过。
				</view>
			</view>
			<view class="bottom" v-if="status == 1">
				恭喜成为福州市工商联第
				<text style="color: #d9001b;">{{detail.user_id}}</text>
				个直属会员。
			</view>

			<view class="top" v-if="status == 2">
				<view class="left">
					审核结果：
				</view>
				<view class="right">
					{{detail.audit_remark}}
				</view>
			</view>
			<view class="top" v-if="status == 3">
				<view class="left">
					审核结果：
				</view>
				<view class="right">
					待审核
				</view>
			</view>
		</view>

		<view class="bottomBox">
			<view class="text" v-if="status == 1">
				若需要直属会员授牌，可点击下方按钮进行申请
			</view>
			<view class="application" @click="application" v-if="status == 1">
				授牌申请
			</view>
			<view class="return" @click="returns">
				返回
			</view>
		</view>
		<view class="" style="height: 30rpx;">

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 2,
				list: [{
						title: '姓名',
						value: '',

					},
					{
						title: '性别',
						value: '',

					},
					{
						title: '民族',
						value: '',

					},
					{
						title: '籍贯',
						value: '',

					},
					{
						title: '出生年月',
						value: '',

					},
					{
						title: '政治面貌',
						value: '',

					},
					{
						title: '学历',
						value: '',

					},
					{
						title: '身份证号码',
						value: '',

					},
					{
						title: '手机号码',
						value: '',

					},
					{
						title: '社会职务',
						value: '',

					},
					{
						title: '所属企业及职务',
						value: '',

					},
					{
						title: '统一社会信用号',
						value: '',

					}, {
						title: '企业类型',
						value: '',

					}, {
						title: '企业行业分类',
						value: '',

					},
					{
						title: '企业注册地',
						value: '',

					}, {
						title: '企业所在地址',
						value: '',

					}, {
						title: '销售总额(万元)',
						value: '',

					},
					{
						title: '员工总数(人)',
						value: '',

					}, {
						title: '企业联络员',
						value: '',

					},
					{
						title: '联络员电话',
						value: '',

					},
					{
						title: '企业简介',
						value: '',

					},
					{
						title: '营业执照',
						value: '',
						status: 'image'

					},
				],
				displayedList: [], // 用于存放当前展示的列表项
				showFold: false, // 用于表示是否展开
				detail: {}
			}
		},
		computed: {
			// 计算 foldText 文本内容
			foldText() {
				return this.showFold ? '收起' : '展开';
			}
		},

		created() {
			// 初始化 displayedList
			this.updateDisplayedList();
			this.getAuditing()

		},
		methods: {
			returns() {
				this.$u.route('/pages/my/membership');

			},
			previewImage() {
				uni.previewImage({
					urls: [this.businessLicense] // 在数组中传入图片路径字符串数据
				});
			},
			async getRead() {
				let res = await this.$api.getRead();
			},
			async getAuditing() {
				let res = await this.$api.getAuditing();
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				if (res.data.row.audit_status == 0) {
					this.status = 3
				} else if (res.data.row.audit_status == 1) {
					this.status = 1
					this.getRead()
				} else if (res.data.row.audit_status == 2) {
					this.status = 2
					this.getRead()
				}
				const data = res.data.row;
				const properties = ['name', 'sex', 'nation', 'native', 'birthday', 'political_outlook', 'education',
					'idcard', 'mobile', 'position', 'unit', 'brnumber', 'qy_type', 'hy_type', 'register_address',
					'qy_address', 'total_sales', 'employee', 'qy_person', 'qy_phone', 'qy_introduct'
				]; // 假设这是你要赋值的属性列表

				// 循环遍历属性列表，将属性值赋给 this.list 数组对应的元素
				properties.forEach((property, index) => {
					this.list[index].value = data[property];
				});
				this.businessLicense = this.$u.http.config.baseUrl + res.data.row.license
				this.detail = res.data.row

			},
			application() {
				this.$u.route('/pages/applicationForm/awarding');

			},
			// 更新显示的列表项
			updateDisplayedList() {
				if (this.showFold) {
					this.displayedList = this.list;
				} else {
					this.displayedList = this.list.slice(0, 8); // 只显示前8个列表项
				}
			},
			// 切换展开收起状态
			toggleFold() {
				this.showFold = !this.showFold;
				this.updateDisplayedList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status {
		position: relative;

		image {
			width: 100%;
			height: 425rpx;
		}

		.text {
			position: absolute;
			left: 255rpx;
			top: 35rpx;
			color: #fff;


			.icon {
				width: 173rpx;
				height: 173rpx;
				border: 10rpx solid #fff;
				border-radius: 50%;
				text-align: center;
				font-weight: bold;
				padding-top: 25rpx;
				margin: 0 auto;
			}

			.font {
				margin-top: 8rpx;
			}

			.num {
				margin-top: 20rpx;
			}
		}
	}

	.list {
		padding: 0rpx 35rpx;
		font-size: 30rpx;


		.item {

			padding: 35rpx 0rpx;
			border-bottom: 3rpx solid #ececec;
			display: flex;

			.left {
				width: 240rpx;
			}

			.right {
				flex: 1;

				.preview {
					width: 95rpx;
					height: 49rpx;
					background-color: #fff;
					border-radius: 7rpx;
					border: solid 1rpx #d9001b;
					color: #d9001b;
					text-align: center;
					line-height: 49rpx;
					font-size: 24rpx
				}

			}

		}

		.foldAndUnfold {
			padding: 25rpx 0rpx;
			text-align: center;
		}

	}

	.result {
		padding: 0rpx 35rpx;

		.top,
		.bottom {
			padding: 35rpx 0rpx;
		}

		.top {
			border-bottom: 3rpx solid #ececec;
			display: flex;

			.left {
				width: 180rpx;
			}

		}

		.bottom {
			position: relative;
			font-size: 40rpx;
			text-indent: 1rem;
		}

		.bottom::before {
			content: '';
			position: absolute;
			display: block;
			top: 50rpx;
			width: 10rpx;
			height: 25rpx;
			background-color: #d9001b;
			border-radius: 5rpx;
		}
	}

	.line {
		background-color: #f8f8f8;
		height: 23rpx;
	}

	.bottomBox {
		padding: 0rpx 35rpx;
		background-color: #f8f8f8;

		.text {
			height: 90rpx;
			line-height: 90rpx;
		}

		.application {
			width: 688rpx;
			height: 67rpx;
			background-color: #d9001b;
			border-radius: 10rpx;
			color: #fff;
			text-align: center;
			border: solid 1rpx #d9001b;

			line-height: 67rpx;
			font-size: 26rpx;
			margin: 0rpx auto;
		}

		.return {
			width: 688rpx;
			height: 67rpx;
			background-color: #fff;
			border-radius: 10rpx;
			color: #d9001b;
			border: solid 1rpx #d9001b;
			text-align: center;
			line-height: 67rpx;
			font-size: 26rpx;
			margin: 30rpx auto;
		}
	}
</style>